<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户信息查询</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/mdui/css/mdui.min.css}">
    <link rel="stylesheet" th:href="@{/animate/css/animate.min.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/materialize/css/materialize.min.css}" media="screen,projection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-cyan-500">
        <a href="javascript:" class="mdui-btn mdui-btn-icon">
            <i class="mdui-icon material-icons">menu</i></a>
        <a href="javascript:" class="mdui-typo-headline" onclick="showTable()">MDUI</a>
        <a href="javascript:" class="mdui-typo-title" onclick="hideTable()">Title</a>
        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
        <a href="javascript:" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
        <a href="javascript:" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
    </div>
</div>

<table id="my_table" class="mdui-table mdui-table-row-selected animated rotateInUpLeft">
    <tr th:each="p: ${person}">
        <td th:text="${p.getName()}"/>
        <td th:text="${p.getPhone()}"/>
        <td th:text="${p.getDate().toLocaleString()}"/>
        <td th:text="${p.getMeid()}"/>
    </tr>

</table>
<div id="main" style="width: 600px;height:400px;" class="animated bounceInUp"></div>

<div class="parallax-container">
    <div class="parallax"><img src="http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg"></div>
</div>
<div class="section white">
    <div class="row container">
        <h2 class="header">Parallax</h2>
        <p class="grey-text text-darken-3 lighten-3">视差是一种效果，在背景内容或图片在一下情况：相对于前景内容滚动的速度有一个不同的移动速度。</p>
    </div>
</div>
<div class="parallax-container">
    <div class="parallax"><img src="http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg"></div>
</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/rxjs@6.2.2/bundles/rxjs.umd.min.js"></script>
<script th:src="@{/materialize/js/materialize.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/mdui/js/mdui.min.js}"></script>
<script th:src="@{/chart/js/Chart.js}"></script>
<script th:src="@{/chart/js/echarts.min.js}"></script>
</body>
</html>
<script>
    const {range, from, of} = rxjs;
    const {map} = rxjs.operators;
    of("1111111111111111")
        .subscribe(console.log);
    range(1, 100)
        .pipe(map(x => {
            if (x > 20) {
                throw '错误了'
            }
            return x + 10;
        }))
        .subscribe(console.log, error = function (e) {
            console.log(e)
        }, complete = function () {
            console.log("complete")
        });


    function hideTable() {
        let classVar = document.getElementById("my_table").getAttribute("class");
        classVar = classVar.replace("flipInX", "bounceOutDown");
        document.getElementById("my_table").setAttribute("class", classVar);
    }

    function showTable() {
        let classVar = document.getElementById("my_table").getAttribute("class");
        classVar = classVar.replace("bounceOutDown", "flipInX");
        // classVar = classVar.concat(" flipInX");
        document.getElementById("my_table").setAttribute("class", classVar);
    }

    let myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    let option = {
        series: [
            {
                color: ['#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data: [
                    {value: 235, name: '视频广告'},
                    {value: 274, name: '联盟广告'},
                    {value: 310, name: '邮件营销'},
                    {value: 335, name: '直接访问'},
                    {value: 400, name: '搜索引擎'},
                    {value: 400, name: '新添加的'}
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script>
    $(document).ready(function () {
        $('.parallax').parallax();
    });
</script>